<template>
	<view class="sort-bar">
		<view v-for="(item, index) in sortList" class="sort-bar-item" :class="{ filter: item.type == 3 }" @click="toggleSort(item)">
			<text :class="{ active: currentSort.title == item.title && item.type != 3 }">{{ item.title }}</text>
			<view v-if="item.type == 2" class="arrow-up-down">
				<text class="arrow-up" :class="{ active: item?.sortTypeValue?.subType == 1 }"></text>
				<text class="arrow-down" :class="{ active: item?.sortTypeValue?.subType == 2 }"></text>
			</view>
		</view>
		<view v-if="rankList.length" @click="openFilter" class="filter-item filter">
			<text :class="{ 'active': (hasRangeFilter && isConfirm) }">筛选</text>
			<image src="@/static/common/filter-icon.png" class="filter-icon"></image>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const sortList = defineModel('sortList', { type: Array, default: [] });
const rankList = defineModel('rankList', { type: Array, default: [] });
const isConfirm = defineModel('isConfirm', { type: Boolean, default: false });
const sortIndex = ref(0);
const currentSort = ref({});
const emit = defineEmits(['toggleSort', 'openFilter']);

const toggleSort = (item) => {
	// console.log(item);

	if (item.type != 3) {
		// 重置排序
		sortList.value.forEach((sort) => {
			sort.sortTypeValue = {};
		});

		// 重置排序顺序
		if (item.title != currentSort.value.title) {
			sortIndex.value = 0;
		}

		currentSort.value = item;

		// 升序降序排列
		if (item.type == 2) {
			currentSort.value.sortTypeValue = item.sortList[sortIndex.value];
			sortIndex.value++;
			if (sortIndex.value >= item.sortList.length) {
				sortIndex.value = 0;
			}
		}
	}

	emit('toggleSort', item);
};

const openFilter = () => {
	emit('openFilter', rankList.value);
};

const hasRangeFilter = ref(false);
watch(rankList.value, () => {
	rankList.value.forEach((item) => {
		if (item.min || item.max) {
			hasRangeFilter.value = true;
		} else {
			hasRangeFilter.value = false;
		}
	});
});

// 清空所有状态
const resetSort = () => {
	currentSort.value = {};
	sortIndex.value = 0;
	hasRangeFilter.value = false;

	// 重置排序
	sortList.value.forEach((sort) => {
		sort.sortTypeValue = {};
	});
};

defineExpose({
	resetSort
});
</script>

<style scoped lang="scss">
.sort-bar {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;

	> view {
		flex: 1;
		text-align: center;
		font-size: 14px;
	}
	
	.sort-bar-header {
		color: red;
		font-size: 19px;
	}

	.sort-bar-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;

		.arrow-up-down {
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;

			.arrow-up {
				width: 0;
				height: 0;
				border-left: 3.5px solid transparent;
				border-right: 3.5px solid transparent;
				border-bottom-width: 4px;
				border-bottom-style: solid;
				border-bottom-color: #969799;
				position: relative;
				top: -1px;

				&.active {
					border-bottom-color: #ff0000;
				}
			}

			.arrow-down {
				width: 0;
				height: 0;
				border-left: 3.5px solid transparent;
				border-right: 3.5px solid transparent;
				border-top-width: 4px;
				border-top-style: solid;
				border-top-color: #969799;
				position: relative;
				top: 1px;

				&.active {
					border-top-color: #ff0000;
				}
			}
		}
	}

	.filter {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.active {
			color: #ff0000;
		}

		.filter-icon {
			position: relative;
			top: 1px;
			width: 12px;
			height: 12px;
			margin-left: 4px;
		}

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0%;
			transform: translate(0%, -50%);
			width: 1px;
			height: 12px;
			background-color: #d9d9d9;
		}
	}

	.active {
		color: #ff0000;
	}
}
</style>
